<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 瀑布流需要添加的 meta -->
    <meta name="referrer" content="no-referrer" />
    <title>艺术品</title>
    <link rel="stylesheet" href="../styles/gonggong.css">
    <link rel="stylesheet" href="../styles/yspbuy.css">
</head>
<body>

    <!-- 顶部导航 -->
    <div id="header" class="">
        <!-- 顶部导航头部 -->
        <div class="header-top">
            <!-- logo -->
            <div class="h-logo">
                <a href="index.html">
                    <img src="https://cdn.ywart.com/header/logo.png" alt="">
                </a>
                <p>— 原创艺术品电商</p>
            </div>
            <!-- 搜索 -->
            <div class="search">
                <div class="choices">
                    <span class="choosed">
                        作品
                        <i class="fa fa-caret-down"></i>
                    </span>
                    <div class="choicebox">
                        <span class="choice active">作品</span>
                        <span class="choice ">艺术品</span>
                    </div>
                </div>
                <img src="https://www.ywart.com/svg_file?path=/content/image/search.svg&rgb=51,51,51" alt="">
                <input type="text" name="HeaderInput" id="HeaderInput" placeholder="搜索感兴趣的关键字">

            </div>
            <!-- 主体 -->
            <div class="header-content">
                <div class="content-box">
                    <div class="zcdl">
                        <a href="../html/dl.html">
                            <img src="https://cdn.ywart.com/header/login.png" alt="" class="IMG">
                        </a>
                        <a href="../html/dl.html">登录 / 注册</a>
                    </div>
                    <div class="MyOrder">
                        <a href="#">我的订单</a>
                    </div>
                    <div class="MyNews">
                        <a href="#">我的消息</a>
                    </div>
                    <div class="Service">
                        <a href="#">在线客服</a>
                    </div>
                    <div class="download lodeJ">
                        <a href="#">手机版</a>
                        <div class="er">
                            <h4>使用手机扫一扫</h4>
                            <img src="https://cdn.ywart.com/content/image/iosDownQRcode.png" alt="">
                            <span>购买咨询：400-605-7033</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主体 下滑显示 -->
            <div class="header-content2">
                <div class="content-box">
                    <div class="login2">
                        <a href="../html/dl.html">
                            <img src="https://cdn.ywart.com/header/login.png" alt="" class="IMG">
                        </a>
                    </div>
                    <div class="car">
                        <a href="">
                            <img src="https://cdn.ywart.com/header/car.png" alt="" class="IMG">
                        </a>
                    </div>
                    <div class="download lodeJ">
                        <a href="#">
                            <img src="https://cdn.ywart.com/header/SJPC.png" alt="" class="IMG">
                        </a>
                        <div class="er">
                            <h4>使用手机扫一扫</h4>
                            <img src="https://cdn.ywart.com/content/image/iosDownQRcode.png" alt="">
                            <span>购买咨询：400-605-7033</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 顶部导航底部 -->
        <div class="header-bottom">
            <div class="bottom-div">
                <div class="nav">
                    <div class="ContentNav ">
                        <a href="index.html">首页</a>
                    </div>
                    <div class="ContentNav YSPDH Nav-border">
                        <a href="yspbuy.html">艺术品</a>
                        <ul class="ysplist">
                            <li><a href="#">全部</a></li>
                            <li><a href="#">入门收藏</a></li>
                            <li><a href="#">潜力收藏</a></li>
                            <li><a href="#">名作收藏</a></li>
                        </ul>
                    </div>
                    <div class="ContentNav">
                        <a href="index.html">艺术家</a>
                    </div>
                    <div class="ContentNav">
                        <a href="index.html">艺术服务</a>
                    </div>
                    <div class="ContentNav">
                        <a href="index.html">艺术视野</a>
                    </div>
                    <div class="ContentNav">
                        <a href="index.html">艺术博览会</a>
                    </div>
                </div class="nav">
                <div class="CarShop">
                    <a href="#">
                        <img src="https://cdn.ywart.com/header/GWCPC.png" alt="">
                        <span>购物车</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 筛选部分 -->
    <div class="simple">
        <!-- 左边 -->
        <div class="choice-left">
            <p class="price">
                <b>价格</b>
                <i>0</i>
                <a href="#"></a>
                <i>¥2,000</i>
                <a href="#"></a>
                <i>¥8,000</i>
                <a href="#"></a>
                <i>¥15,000</i>
                <a href="#"></a>
                <i>¥30,000</i>
                <a href="#"></a>
                <i>max</i>
            </p>
            <p class="size">
                <b>尺寸</b>
                <i>0</i>
                <a href="#"></a>
                <i>50cm</i>
                <a href="#"></a>
                <i>100cm</i>
                <a href="#"></a>
                <i>150cm</i>
                <a href="#"></a>
                <i>200cm</i>
                <a href="#"></a>
                <i>max</i>
            </p>
            <p class="color">
                <b>颜色</b>
                <a class="red" href="#"></a>
                <a class="yellow" href="#"></a>
                <a class="green" href="#"></a>
                <a class="blue" href="#"></a>
                <a class="bwg" href="#"></a>
            </p>
            <p class="shape">
                <b>形状</b>
                <a class="square" href="#"></a>
                <a class="la-Rec" href="#"></a>   
                <a class="lo-Rec" href="#"></a>
                <a class="round " href="#"></a>
                <a class="irregular" href="#">
                    <img src="https://cdn.ywart.com/content/image/icon_star_empty.svg" alt="default" class="default">
                    <!-- <img src="/svg_file?path=/content/image/icon_star.svg" alt="hover" class="hover">
                    <img src="/svg_file?path=/content/image/icon_star.svg" alt="active" class="show"> -->
                </a>
            </p>
        </div>
        <!-- 中间 -->
        <div class="choice-middle">
            <div class="space">
                <h3>摆放空间</h3>
                <ul class="Space">
                    <a href="#">办公</a>
                    <a href="#">客厅</a>
                    <a href="#">书房</a>
                    <a href="#">餐厅</a>
                    <a href="#">儿童房</a>
                    <a href="#">回廊/走廊</a>
                </ul>
            </div>
            <div class="catefory">
                <h3>分类</h3>
                <ul class="Category">
                    <a href="#">油画</a>
                    <a href="#">版画</a>
                    <a href="#">水墨</a>
                    <a href="#">水彩(粉)</a>
                    <a href="#">雕塑</a>
                    <a href="#">摄影</a>
                </ul>
            </div>
        </div>
        <!-- 右边 -->
        <div class="choice-right">
            <div class="text">
                <ul class="style">
                    <a href="#">抽象</a>
                    <a href="#">具象</a>
                    <a href="#">观念</a>
                    <a href="#">传统国画</a>
                </ul>
                <ul class="theme">
                    <a href="#">人物</a>
                    <a href="#">风景</a>
                    <a href="#">静物</a>
                </ul>
            </div>
            <div class="show-wall">
                <div class="cover-hidden">
                </div>
                <h2 class="en-des">抽象</h2>
                <h2 class="en-des">Abstract-Expression</h2>
                <hr class="-hidden">
                <p>是既不模仿又不直接再现外在现实，以形式和色彩本身来打动观众的艺术风格。通过对现实的扭曲变形来表现艺术家的激情和内心幻象，强调表现的自发性和艺术家的个性.</p>
            </div>
        </div>
    </div>
    <!-- 数据加载 瀑布流+分页 -->
    <div class="waterfall-container">
        <div class="waterfall-wrapper grid-list">
            <!-- <div class="item-box">
                    <div class="item-img-box">
                          <img src="https://c-ssl.duitang.com/uploads/item/201403/22/20140322022445_HB43w.thumb.400_0.jpeg" alt="">
                    </div>
                    <div class="title">
                          花卉。瓶花。植物。摄影。清新。园艺。盆栽。多肉
                    </div>
              </div> -->
        </div>
    </div>
    
</body>
    <script src="../javascripts/jquery.js"></script>
    <script src="../javascripts/fzhs.js"></script>
    <script src="../javascripts/yspbuy.js"></script>
</html>